<template lang="html">
  <div class="modal-container">
    <div class="modal">
      <div class="title">
        <button class="button" @click="isLoginButton" :class="{'active':btnLgoinAct}" type="button" name="button">登陆</button>
        <button class="button" @click="isRegisterButton" :class="{'active':BtnRegAct}" type="button" name="button">注册</button>
      </div>
      <div class="content">
          <div class="login" v-if="isLogin">
            <input type="text" name="username" v-model="userinfo.username" placeholder="请输入用户名">
            <input type="password" name="password" v-model="userinfo.password" placeholder="请输入密码">
            <button class="button" type="button" name="button" @click="loginHandler">登陆</button>
          </div>
          <div class="register" v-else>
            <input type="text" name="username" v-model="userinfo.reusername" placeholder="请输入用户名">
            <input type="password" name="password" v-model="userinfo.repassword" placeholder="请输入密码">
            <input type="password" name="password" v-model="userinfo.conpassword" placeholder="再次输出密码">
            <button class="button" type="button" name="button" @click="registerHandler">注册</button>
          </div>
      </div>
    </div>
    <div class="shade" @click="shadeHandler" :class="{'shadeShow':!shadeShow}"></div>
  </div>
</template>

<script>
export default {
  name:"dialogs",
  data(){
    return{
      shadeShow:true,
      isLogin:true,
      userinfo:{
        username:"",
        password:"",
        reusername:"",
        repassword:"",
        conpassword:""
      },
      btnLgoinAct:true,
      BtnRegAct:false
    }
  },
  methods:{
    shadeHandler(){
      this.$emit("shade",false);
    },
    loginHandler(){
      // 用户登陆
      this.$emit("loginInfo",this.userinfo);
    },
    registerHandler(){
      // 用户注册
      this.$emit("regInfo",this.userinfo);
    },
    isLoginButton(){
      this.btnLgoinAct = true;
      this.BtnRegAct = false;
      this.isLogin = true;
    },
    isRegisterButton(){
      this.btnLgoinAct = false;
      this.BtnRegAct = true;
      this.isLogin = false;
    }
  }
}
</script>

<style lang="css" scoped>

.modal{
  position: fixed;
  left: 50%;
  top: 100px;
  margin-left: -200px;
  width: 400px;
  height: 300px;
  background: #fff;
  z-index: 3000;
}

.shade{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  background: #000;
  opacity: 0.5;
}

.shadeShow{
  display: none
}

.title{
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #f1f1f1;
}

.button{
  border: none;
  padding: 7px 20px;
  text-align: center;
  border: 1px solid #f1f1f1;
  border-radius: 5px;
  outline:none;
}

.active{
  background: green;
  color: #fff;
}

.content{
  width: 80%;
  margin: 20px auto;
}

.content div input{
  width: 100%;
  height: 30px;
  display: block;
  margin: 10px 0;
  padding-left: 10px;
}

</style>
